<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="icon" href="http://124.221.62.120:3000/api/favicon.ico">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile</title>
    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="./node_modules/bootstrap-icons/font/bootstrap-icons.css">
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./src/css/profile/profile.css">
    <script src="./config.js"></script>
    <script src="./node_modules/axios/dist/axios.min.js"></script>
</head>

<body>
    <!-- 提示框 -->
    <div id="toast-top" class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
        <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <img src="http://124.221.62.120:3000/api/uploads/favicon.ico" style="width: 30px;" class="rounded me-2"
                    alt="..." />
                <strong class="me-auto"></strong>
                <small>刚刚</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">Hello, world! This is a toast message.</div>
        </div>
    </div>

    <div class="container_profile">
        <!-- 头部 -->
        <div class="header_profile">
            <h4>用户信息</h4>
        </div>
        <!-- 主体 -->
        <div class="userinfo_profile">
            <!-- 头像展示 -->
            <div class="user_img">
                <div class="img_circle">
                    <div class="img_circle_1">
                        <div class="img_box">
                            <img class="userimg" src="http://124.221.62.120:3000/api/uploads/favicon.ico" alt="">

                        </div>
                    </div>
                    <div class="img_circle2"></div>
                    <div class="choose_img">更换头像</div>
                </div>
            </div>
            <hr style="border:dotted rgba(121, 82, 179.5);">
            <!-- form表单 -->
            <div class="form_edit">
                <input type="file" name="file" style="display: none;" id="iptfile">
                <fieldset disabled>
                    <div class="mb-3">
                        <label for="disabledTextInput" class="form-label">用户名</label>
                        <input id="user_username" type="text" id="user_username_disable" class="form-control"
                            placeholder="Disabled input" value="username">

                    </div>
                </fieldset>
                <div class="md-3">
                    <label for="disabledTextInput" class="form-label">昵称</label>
                    <input id="user_nickname" class="form-control" type="text" placeholder="nickname"
                        aria-label="default input example">
                    <label for="disabledTextInput" class="form-label">Email</label>
                    <input id="user_email" class="form-control" type="email" placeholder="Email"
                        aria-label="default input example">
                    <button type="button" id="user_btn" style="margin-top: 10px;padding-left: 40px;padding-right: 40px;"
                        class="btn btn-outline-success">提交</button>
                    <button type="button" id="user_send_pw"
                        style="margin-top: 10px;padding-left: 40px;padding-right: 40px;"
                        class="btn btn-outline-danger">修改密码</button>
                </div>

            </div>
            <div class="form_edit_password" style="display: none;">
                <div class="md-3">
                    <label class="form-label">旧密码</label>
                    <input id="user_old_pwd" class="form-control" type="password" placeholder="旧密码"
                        aria-label="default input example">
                    <label class="form-label" style="margin-top: 10px;">新密码</label>
                    <input id="user_new_pwd" class="form-control" type="password" placeholder="新密码"
                        aria-label="default input example">
                    <button type="button" id="user_submit_pwd"
                        style="margin-top: 10px;padding-left: 40px;padding-right: 40px;"
                        class="btn btn-outline-success">更改密码</button>
                    <button type="button" id="user_cancel_pwd_btn"
                        style="margin-top: 10px;padding-left: 40px;padding-right: 40px;"
                        class="btn btn-outline-danger">取消更改</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        //tip 全局可用tip框
        var toastTrigger = document.getElementById("liveToastBtn");
        var toastLiveExample = document.getElementById("liveToast");
        var toast = new bootstrap.Toast(toastLiveExample);
        var btn_login = document.querySelector(".btn-login");
        var me_uto = document.querySelector(".me-auto");
        var toast_body = document.querySelector(".toast-body");
    </script>
    <script>

    </script>
    <script>
        // me_uto.innerHTML = "上传失败";
        // toast_body.innerHTML = "上传的图片不能为空";
        // toast.show();
    </script>
    <!-- 本页js文件 -->
    <script src="./src/js/profile/profile.js"></script>
</body>

</html>